<template>
  <div>
    <h3>客户来访</h3>
      <div>
          <ul>
              <li>
                  <span>客户姓名：</span><input type="text" v-model="name">
              </li>
              <li>
                  <span>客户电话：</span><input type="text" v-model="phone">
              </li>
              <li>
                  <span>客户性别：</span>
                  <input class="sex" type="radio" name="sex" value="1" v-model="sex" checked>女
                  <input class="sex" type="radio" name="sex" value="2" v-model="sex">男
              </li>
              <li>
                  <span>来访途径：</span>
                  <select name="visitWay" id="visit_way" v-model="visitWay">
                      <option value="1">路牌</option>
                      <option value="2">灯箱</option>
                      <option value="3">站台</option>
                      <option value="4">电视</option>
                      <option value="5">广播</option>
                      <option value="6">网络</option>
                      <option value="7">微信推送</option>
                      <option value="8">报纸</option>
                      <option value="9">短信推送</option>
                      <option value="10">车厢广告</option>
                      <option value="11">渠道介绍</option>
                      <option value="12">老客户介绍</option>
                  </select>
              </li>
              <li>
                  客户年龄：
                  <select name="customer_age" id="customer_age" v-model="customerAge">
                      <option value="1">18-25岁</option>
                      <option value="2">25-30岁</option>
                      <option value="3">30-40岁</option>
                      <option value="4">40-50岁</option>
                      <option value="5">50-60岁</option>
                      <option value="6">60-70岁</option>
                      <option value="7">70岁以上</option>
                  </select>
              </li>
              <li>
                  常住区域：
                  <select name="customer_region" id="customer_region" v-model="customerRegion">
                      <option value="1">涪城区</option>
                      <option value="2">高新区</option>
                      <option value="3">游仙区</option>
                      <option value="4">经开区</option>
                      <option value="5">安州区</option>
                      <option value="6">江油</option>
                      <option value="7">盐亭</option>
                      <option value="8">三台</option>
                      <option value="9">梓潼</option>
                      <option value="10">北川</option>
                      <option value="11">平武</option>
                  </select>
              </li>
              <li>
                  面积需求：
                  <select name="customer_area" id="customer_area" v-model="customerArea">
                      <option value="1">30-70平米</option>
                      <option value="2">70-80平米</option>
                      <option value="3">80-90平米</option>
                      <option value="4">90-100平米</option>
                      <option value="5">100-120平米</option>
                      <option value="6">120-140平米</option>
                      <option value="7">140-180平米</option>
                      <option value="8">180-230平米</option>
                      <option value="9">230平米以上</option>
                  </select>
              </li>
              <li>
                  需求业态：
                  <select name="customer_need_type" id="customer_need_type" v-model="customerNeedType">
                      <option value="1">住宅</option>
                      <option value="2">商铺</option>
                      <option value="3">公寓</option>
                      <option value="4">车位</option>
                  </select>
              </li>
              <li>
                  客户行业：
                  <select name="customer_job" id="customer_job" v-model="customerJob">
                      <option value="1">公务员</option>
                      <option value="2">事业单位</option>
                      <option value="3">服务行业</option>
                      <option value="4">个体经营</option>
                      <option value="5">自有公司</option>
                      <option value="6">劳务务工</option>
                      <option value="7">自由职业</option>
                      <option value="8">离退休</option>
                      <option value="9">其它</option>
                  </select>
              </li>
              <li>
                  意向价格：
                  <select name="customer_price" id="customer_price" v-model="customerPrice">
                      <option value="1">6000-8000元</option>
                      <option value="2">8000-9000元</option>
                      <option value="3">9000-10000元</option>
                      <option value="4">10000-11000元</option>
                      <option value="5">11000-12000元</option>
                      <option value="6">12000-13000元</option>
                      <option value="7">13000-14000元</option>
                      <option value="8">14000-15000元</option>
                      <option value="9">15000-16000元</option>
                      <option value="10">16000-17000元</option>
                      <option value="11">17000-18000元</option>
                      <option value="12">18000元以上</option>
                  </select>
              </li>
              <li>
                  意向户型：
                  <select name="customer_shape" id="customer_shape" v-model="customerShape">
                      <option value="1">一室一厅</option>
                      <option value="2">两室一厅</option>
                      <option value="3">两室两厅</option>
                      <option value="4">三室两厅</option>
                      <option value="5">四室两厅</option>
                  </select>
              </li>
          </ul>
          <button @click="sub()" class="sub">保存</button>
      </div>

  </div>
</template>

<script>
    export default {
        name: "CustomerAdd",
        data(){
            return{
                name:'',
                phone:'',
                visitWay:'1',
                sex:'1',
                customerAge:'1',
                customerRegion:'1',
                customerArea:'1',
                customerNeedType:'1',
                customerJob:'1',
                customerPrice:'1',
                customerShape:'1'
            }
        },
        methods:{
            sub(){
                console.log(this.visitWay);
            },

        },
        mounted(){

        },
    }
</script>

<style scoped>
    ul{
        padding: 0;
    }
    li{
        list-style-type: none;
        padding: .3rem;
    }
    input{
        width:13rem;
        height: 1.2rem;
        border: 1px solid #dcdfe6;
    }
    input:focus{
        outline: none;
        border:1px solid #409EFF;
        border-radius: .5rem;
    }
    select{
        width:13rem;
        height: 1.5rem;
    }
    select:focus{
        outline: none;
        border:1px solid #409EFF;
        border-radius: .5rem;
    }
    /*提交按钮*/
    .sub{
        width:8rem;
        height: 2.5rem;
        background-color: #008CBA;
        font-size: 1rem;
        font-weight: bold;
        color: #fff;
        outline: none;
        border-radius: .2rem;
        border: none;
        line-height: 2.5rem;
    }
    .sex{
        width:4.8rem;
        height: 1rem;
    }
</style>
